<template>
  <div class="permission">
    <div class="operate">
      <div>
        <div style="flex: 0 0 auto">
          <ep-search
            v-model="queryInfo.b0102"
            :size="size"
            style="margin-left: 15px"
            placeholder="请输入点位名称"
            enter-button="chaxun "
            @search="
              () => {
                this.listQuery();
              }
            "
          ></ep-search>
        </div>
        <ep-button
          :size="size"
          style="margin-left: 15px"
          icon="refresh.svg"
          @click="
            () => {
              this.flushPage();
            }
          "
        ></ep-button>
      </div>

      <div>
        <column-manage
          :column.sync="tableColumn"
          @change="columnChange"
        ></column-manage>
        <ep-button
          :size="size"
          style="margin-left: 15px"
          icon="export.svg"
          @click="
            () => {
              this.exportExcel();
            }
          "
          >导出</ep-button
        >
      </div>
    </div>

    <div style="margin-top: 10px"></div>

    <div class="ep-table">
      <zh-table
        ref="tableList"
        rowId="roleId"
        :url="tableUrl"
        height="auto"
        :columns="tableColumn"
        :data="tableData"
      >
        <template #filter="{ $panel, column }">
          <input
            type="type"
            v-for="(option, index) in column.filters"
            :key="index"
            v-model="option.data"
            @input="$panel.changeOption($event, true, option)"
          />
        </template>
        <template #operate="{ row }">
          <div class="alert-message">
            <i class="fa fa-exclamation-circle alert-message-icon"></i>
            <span class="alert-message-content">
              <ep-button
                v-if="row.e0213 === '03' || row.e0213 === '05'"
                size="small"
                type="rank"
                @click="auditView(row,'view')"
                >查看</ep-button
              >
              <ep-button v-else size="small" type="rank" @click="auditView(row,'audit')"
                >审核</ep-button
              >
            </span>
          </div>
        </template>
        <template #e0210Name="{ row }">
          <template>
            <span :class="row.e0210 === '02' ? 'e0210-02' : null">{{
              row.e0210Name
            }}</span>
          </template>
        </template>
        <template #e0212Name="{ row }">
          <template v-if="row.e0212 !== ''">
            <span :class="'e0212-' + row.e0212">{{ row.e0212Name }}</span>
          </template>
        </template>
      </zh-table>
    </div>
    <a-modal
      title="隐患信息"
      v-model="flowVisible"
      centered
      width="65%"
      destroyOnClose
      :footer="null"
      wrapClassName="flow-manager-wrap"
    >
      <div style="height: calc(100vh - 180px); padding: 0 10px; overflow: auto">
        <flow-manager
          :data="managerData"
          :e0201="e0201"
          :oprate-show="operateShow"
          @managerModalClose="managerModalClose"
        ></flow-manager>
      </div>
    </a-modal>
  </div>
</template>

<script>
import modal from "ant-design-vue/es/modal";
import flowManager from "@/pages/flowPath/manager.vue";
import { disposalTaskListQuery } from "@/services/system/whdngxlApi";
import { getBatchDict } from "@/services/system/api";
import { lookOver, getDangerHandleProcess } from "@/services/system/flowPath";
import EpButton from "@/components/assembly/button";
import ZhTable from "@/components/zh-table/ZhTable";
import ColumnManage from "@/components/assembly/columnManage";
import UnmovableRelics from "@/pages/whdngxl/TasksCheckManage/UnmovableRelics";
import { mapGetters } from "vuex";
export default {
  name: "DisposalTaskList",
  components: {
    ColumnManage,
    EpButton,
    ZhTable,
    flowManager,
  },
  computed: {
    ...mapGetters(["size"]),
  },
  data() {
    return {
      dictData: {},
      filtersData: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      // 分页参数
      tablePage: {
        total: 0,
        currentPage: 1,
        pageNum: 1,
        pageSize: 200,
      },
      tableUrl: disposalTaskListQuery,
      tableColumn: [
        {
          type: "seq",
          width: 80,
          fixed: "left",
          align: "center",
          title: "序号",
          visible: true,
        },
        {
          field: "e0201",
          title: "处置任务ID",
          visible: false,
          align: "center",
          width: 150,
        },
        {
          field: "b0101",
          title: "点位ID",
          visible: false,
          align: "center",
          width: 150,
        },
        {
          field: "e0205",
          title: "时间",
          align: "center",
          width: 150,
          visible: true,
        },
        {
          field: "b0102",
          title: "隐患点",
          align: "center",
          width: 150,
          visible: true,
        },
        {
          field: "e0207Name",
          title: "上报来源",
          align: "center",
          filters: [],
          width: 150,
          visible: true,
        },
        {
          field: "e0204Name",
          title: "隐患类型",
          align: "center",
          filters: [],
          width: 150,
          visible: true,
        },
        {
          field: "e0206Name",
          title: "隐患等级",
          align: "center",
          filters: [],
          width: 150,
          visible: true,
        },
        {
          field: "e0209",
          title: "处置人员",
          align: "center",
          width: 150,
          visible: true,
          filters: [{ data: "" }],
          filterMethod: this.filterE0209Method,
          slots: {
            // 使用插槽模板渲染
            filter: "filter",
          },
        },
        {
          field: "e0210",
          title: "处置情况ID",
          visible: false,
          align: "center",
          width: 100,
        },
        {
          field: "e0210Name",
          title: "处置情况",
          align: "center",
          width: 100,
          filters: [],
          visible: true,
          slots: {
            // 使用插槽模板渲染
            default: "e0210Name",
          },
        },
        {
          field: "e0211",
          title: "审核人员",
          align: "center",
          width: 150,
          visible: true,
          filters: [{ data: "" }],
          filterMethod: this.filterE0211Method,
          slots: {
            // 使用插槽模板渲染
            filter: "filter",
          },
        },
        {
          field: "e0212",
          title: "审核情况ID",
          visible: false,
          align: "center",
          width: 100,
        },
        {
          field: "e0212Name",
          title: "审核情况",
          align: "center",
          filters: [],
          width: 120,
          visible: true,
          slots: {
            // 使用插槽模板渲染
            default: "e0212Name",
          },
        },
        {
          field: "e0213",
          title: "当前任务状态ID",
          visible: false,
          align: "center",
          width: 100,
        },
        {
          field: "operate",
          title: "操作",
          fixed: "right",
          align: "center",
          width: 120,
          slots: {
            // 使用插槽模板渲染
            default: "operate",
          },
          visible: true,
        },
      ],
      rules: {},
      tableData: [],
      visible: false,
      //表头
      toolbarConfig: {
        custom: true,
        slots: {},
      },
      queryInfo: {
        b0102: "",
      },
      advanced: false,
      row: {},
      columns: [],
      managerData: {},
      flowVisible: false,
      e0201: "",
      operateShow:false,
    };
  },
  mounted() {},
  created() {
    //获取任务范围
    /*  this.$http.post(getPermissionParams, {}).then((res) => {
      const data = res.result;
      this.taskAreaTree = data.orgTreeData;
    });*/
    // 数据初始化
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    manageAreaChange() {
      this.listQuery();
    },
    init() {
      const params2 = {};
      params2.dictFields = "e0204,e0206,e0207,e0210,e0212";
      this.$http.post(getBatchDict, params2).then((res) => {
        this.dictData = res.result;
        //获取筛选数据
        UnmovableRelics.methods.getFiltersData(this, "tableList");
      });
      this.listQuery();
    },
    auditView(row,type) {//type分为审核和查看
      if(type === 'audit'){
        this.operateShow = true
        this.$http.post(lookOver, { e0201: row.e0201 }).then((res) => {
          if (res.code === 0) {
            this.getDangerHandleProcess(row);
          } else {
            this.$notification["error"]({
              message: "提示",
              description: res.message,
              duration: 4,
            });
          }
        });
      }else{
        this.operateShow = false
        this.getDangerHandleProcess(row);
      }
    },
    getDangerHandleProcess(row) {
      this.$http
        .post(getDangerHandleProcess, { e0201: row.e0201 })
        .then((res) => {
          if (res.code === 0) {
            this.e0201 = row.e0201;
            this.managerData = res.result || {};
            setTimeout(() => {
              this.flowVisible = true;
            }, 300);
          } else {
            this.$notification["error"]({
              message: "提示",
              description: res.message,
              duration: 4,
            });
          }
        });
    },
    managerModalClose() {
      this.flowVisible = false;
    },
    handleOk() {},
    handleCancel() {
      this.visible = false;
    },
    showOrHide() {
      this.visible = !this.visible;
    },
    listQuery() {
      //手动清空用户的选择
      this.$refs.tableList.clearCheckboxRow();
      //手动清空用户保留选中的行数据
      this.$refs.tableList.clearCheckboxReserve();
      //删除所选中的数据
      this.$refs.tableList.removeCheckboxRow();
      this.selectionRows = [];
      this.selectedRowKeys = [];
      this.$refs.tableList.isAllChecked = false;
      this.row = {};
      this.tableData = [];
      this.$refs.tableList.query(this.queryInfo);
    },
    //刷新
    flushPage() {
      this.queryInfo.b0102 = "";
      this.init();
    },
    exportExcel() {
      this.$refs.tableList.exportData("处置任务清单信息",'csv');
    },
    columnChange() {
      this.$refs.tableList.refreshColumn();
    },
    filterE0209Method({ option, row }) {
      return row.e0209.includes(option.data);
    },
    filterE0211Method({ option, row }) {
      return row.e0211.includes(option.data);
    },
  },
};
</script>

<style lang="less" scoped>
.permission {
  //padding: 15px 20px 0;
  height: 100%;

  .desc,
  .operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    > div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }
  }

  .desc {
    margin-bottom: 20px;
  }

  .operate {
    margin-bottom: 15px;
    .field {
      flex: 0 0 auto;
      position: relative;
      margin-left: 15px;
      .field-box {
        position: absolute;
        top: 40px;
        left: 0;
        right: -40px;
        z-index: 99;
        border: 1px solid #2175a9;
        background: #002a44;
        border-radius: 5px;
        ul {
          padding: 10px;
          li {
            padding: 1px 0;
          }
        }
        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px;
          border-top: 1px solid #2175a9;
          color: #fff;
          p {
            flex: 1;
            text-align: center;
            cursor: pointer;
            &:hover {
              color: #49bbeb;
            }
          }
        }
      }
    }
  }
  .ep-table {
    height: calc(100% - 130px);
  }
  .e0210-02 {
    color: #c91010;
  }
  .e0212-01 {
    color: #1bb166;
  }
  .e0212-02 {
    color: #c91010;
  }
}
</style>
